<template>
	<div :style="top" style="padding-top:5px">
		<NavBar @search='search' @index="backIndex"></NavBar>
		<Board v-show='isBoardShow'></Board>
		<Search v-show='isSearchShow'></Search>
		<AudioBox></AudioBox>
	</div>
</template>

<script>
	import NavBar from '@/components/Nav.vue'
	import Board from '@/components/Board.vue'
	import Search from '@/components/Search.vue'
	import AudioBox from '@/components/Audio.vue'
	
	export default {
		components: {
			NavBar,
			Board,
			Search,
			AudioBox
		},
		data: function() {
			return {
				icon: '',
				nickname: '',
				page: '',
				isBoardShow: true,
				isSearchShow: false,
				top: 'margin-top:0px'
			}
		},
		created: function() {
			document.body.style = 'background-image:none'
			document.onready = this.resize
			window.onresize = this.resize
			this.resize()
			var that = this
			this.$store.dispatch('info').then(function(response) {
				var user = response.body
				that.$store.state.user = user
				var nav = that.$children[0]
				nav.nickname = user.nickname
				nav.icon = user.icon
			})
			this.$store.dispatch('hot').then(function(response) {
				var item = that.$children[1]
				item.innerHtml = response.body
			})
		},
		methods: {
			resize: function() {
				var that = this
				setTimeout(function() {
					var top = that.$el.querySelector('nav').offsetHeight
					that.top = 'margin-top:' + top + 'px;'
				}, 500)
			},
			search: function() {
				this.isBoardShow = false
				var keywords = this.$children[0].content
				var item = this.$children[2]
				item.search(keywords, 0)
			},
			backIndex: function() {
				this.isBoardShow = true
			}
		},
		watch: {
			isBoardShow: function(value, oldValue) {
				if(value !== oldValue) {
					this.isSearchShow = oldValue
				}
			},
			isSearchShow: function(value, oldValue) {
				if(value !== oldValue) {
					this.isBoardShow = oldValue
				}
			}
		}
	}
</script>

<style>
	body {
		box-shadow: 1px 3px 3px #888;
	}
</style>